<template>
    <div class="form-container">
      <div class="form-item">
        <div class="item-title">选择区域</div>
        <div class="input-area">
          <el-select
            v-model="code[0]"
            placeholder="选择省"
            @change="(val) => getCityOrZone(val, 0)"
          >
            <el-option
              v-for="(item, index) in allProvince"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-left: 10px;"
            v-model="code[1]"
            placeholder="选择市"
            :disabled="!code[0]"
            @change="(val) => getCityOrZone(val, 1)"
          >
            <el-option
              v-for="(item, index) in allCity"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-select
          style="margin-left: 10px;"

            v-model="code[2]"
            :disabled="!code[1]"
            placeholder="选择区县"
          >
            <el-option
              v-for="(item, index) in allZone"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-button
           style="margin-left: 10px;"
            type="primary"
            @click="addArea"
            >确定选择</el-button
          >
        </div>
        <div class="tags">
          <el-tag
            round
            type="info"
            effect="dark"
            :closable="true"
            style="margin-right: 10px; margin-bottom: 3px;"
            @close="(val) => delArea(val, item)"
            v-for="(item, index) in allTags"
            :key="index"
            >{{ item.map((item) => item.name).join("-") }}</el-tag
          >
        </div>
      </div>
      <div class="mosi">选择订单模式</div>
      <div class="qiandiv">
        <input type="radio" style="zoom: 2;" class="radios" name="tt">
        <span class="dansp1">抢单模式</span>
        <span class="dansp2">乘客下单后，在3KM内把订单派给积分靠前的</span>
        <input class="inp"/>
        <span>名司机，进行抢单。若司机取消订单，则重新抢单</span>
      </div>
      <div class="qiandiv">
        <input type="radio" style="zoom: 2;" class="radios" name="tt">
        <span class="dansp1">自由派单模式</span>
        <span class="dansp3">乘客下单后，直接分配分数最高的司机，若司机取消，则立即分配给下一分数的司机</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">积分计算规则</span>
        <span>&nbsp;&nbsp;（按自然月计算，每月1号0点清零）</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">基础分</span>
        <span class="dansp5">&nbsp;&nbsp;40分（每月直接生效）</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">活跃度</span>
        <span class="dansp5">&nbsp;&nbsp;上限20分</span>
        <span class="dansp6">在每日</span>
        <input class="inpss"/>-
        <input class="inps"/>
        <span>点</span>
        <input class="inpss"/>-
        <input class="inps"/>
        <span>点</span>
        <input class="inpss"/>-
        <input class="inps"/>
        <span>点</span>
        <span class="dansp7">内接单，每单加</span>
        <input class="inp"/>
        <span>分，最高15分;</span>
      </div>
      <div class="qiandiv addfenss">
            <span class="dansp8">其他时间每单加</span>
            <input class="inp"/>
            <span>分，最高5分；</span>
            <span class="dansp9">司机取消订单，每单扣</span>
            <input class="inp"/>
            <span>分；</span>
            <span class="dansp9">乘客取消订单，每单扣</span>
            <input class="inp"/>
            <span>分；</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">好评率</span>
        <span class="dansp5">&nbsp;&nbsp;上限20分</span>
        <span class="dansp6">每单五星好评，增加</span>
        <input class="inp"/>
        <span>分，</span>
        <span class="dansp19">每单差评（五星以下），减少</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">网约车资格证</span>
        <span class="dansp11">&nbsp;&nbsp;10分（每月直接生效）</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">道路运输证</span>
        <span class="dansp12">&nbsp;&nbsp;20分（每月直接生效）</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">推广</span>
        <span class="dansp13">&nbsp;&nbsp;20分</span>
        <span class="dansp14">&nbsp;&nbsp;每推广一位乘客，增加</span>
        <input class="inp"/>
        <span>分，最高10分，每推广一位司机，增加</span>
        <input class="inp"/>
        <span>分，最高10分</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">称号</span>
        <span class="dansp13">&nbsp;&nbsp;不限</span>
        <span class="dansp14">&nbsp;&nbsp;本月总订单</span>
        <input class="inp"/>
        <span>单以上，获得“跑单能手”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;本月总订单</span>
        <input class="inp"/>
        <span>单以上，获得“城市英雄”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;累计总订单</span>
        <input class="inp"/>
        <span>单以上，永久显示“跑单能手”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dang">当月有效</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;累计总订单</span>
        <input class="inp"/>
        <span>单以上，永久显示“城市英雄”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dang">当月有效</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;本月总推广乘客</span>
        <input class="inp"/>
        <span>名以上，获得“推广能手”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;本月总推广乘客</span>
        <input class="inp"/>
        <span>名以上，获得“推广英雄”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp17">&nbsp;&nbsp;累计推广乘客</span>
        <input class="inp"/>
        <span>名以上，永久显示“推广能手”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp17">&nbsp;&nbsp;累计推广乘客</span>
        <input class="inp"/>
        <span>名以上，永久显示“推广英雄”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;本月总推广司机</span>
        <input class="inp"/>
        <span>名以上，获得“司机导师”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp16">&nbsp;&nbsp;本月总推广司机</span>
        <input class="inp"/>
        <span class="wangs">名以上，获得“司机王”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp17">&nbsp;&nbsp;累计推广司机</span>
        <input class="inp"/>
        <span>名以上，永久显示“司机导师”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfentom">
        <span class="dansp1"></span>
        <span class="dansp13">&nbsp;&nbsp;</span>
        <span class="dansp17">&nbsp;&nbsp;累计推广司机</span>
        <input class="inp"/>
        <span class="sijiwang">名以上，永久显示“司机王”称号，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1">贡献分</span>
        <span class="dansp5">&nbsp;&nbsp;不限</span>
        <span class="dansp19">贡献分数排名在</span>
        <input class="inp"/>
        <span>名以内，成为金牌合伙人，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1"></span>
        <span class="dansp5">&nbsp;&nbsp;</span>
        <span class="dansp20">贡献分数排名在</span>
        <input class="inp"/>
        <span>名以内，成为银牌合伙人，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="qiandiv addfenss">
        <span class="dansp1"></span>
        <span class="dansp5">&nbsp;&nbsp;</span>
        <span class="dansp20">贡献分数排名在</span>
        <input class="inp"/>
        <span>名以内，成为铜牌合伙人，增加</span>
        <input class="inp"/>
        <span>分</span>
        <span class="dangs">当月有效</span>
      </div>
      <div class="btntom">
        <el-button type="primary" class="xiao">取消</el-button>
        <el-button type="primary" class="store">保存</el-button>
      </div>
    </div>
  </template>
  <script setup name="Rules-adds">
  import { getRegionChildren, addRules } from "@/api/system/rules";
import { ref } from "vue";
  
  const { proxy } = getCurrentInstance();
  
  const code = ref([]);
  const allTags = ref([]);
  const data = reactive({
    form: {
      code: [],
      timePeriodList: [],
    },
    allProvince: [],
    allCity: [],
    allZone: [],
  });
  
  const { form, allProvince, allCity, allZone } = toRefs(data);
  
  onMounted(() => {
    if (proxy.$route.query.form) {
      form.value = JSON.parse(proxy.$route.query.form);
      form.value.code = form.value.code.split(",");
    }
  });

  function delArea(e, index) {
    console.log(index,'删除的参数paramsimdex')
    allTags.value = allTags.value.filter((item) => item != index);
    form.value.code = form.value.code.filter((item) => item != index[2].code);
  }
  
  function getProvince() {
    getRegionChildren(0).then((res) => {
      allProvince.value = res.data;
    });
  }
  
  function getCityOrZone(id, type) {
    if (type == 0)
      getRegionChildren(id).then((res) => {
        allCity.value = res.data;
      });
    else
      getRegionChildren(id).then((res) => {
        allZone.value = res.data;
      });
  }
  
  function addArea() {
    if (allTags.value.find((item) => item[2].code == code.value[2])) {
      proxy.$modal.msgError("已有该区域");
      return;
    }
    allTags.value.push([
      allProvince.value.find((item) => item.code == code.value[0]),
      allCity.value.find((item) => item.code == code.value[1]),
      allZone.value.find((item) => item.code == code.value[2]),
    ]);
    form.value.code.push(code.value[2]);
    code.value = [];
    allCity.value = [];
    allZone.value = [];
  }
  
  getProvince();
  </script>
  <style scoped lang="scss">
  .rong{
    width: 80%;
    // background-color: red;
    margin-left: 44px;
    display: flex;
    justify-items: end;
    align-items: end;
    div{
      margin-left: 15px;
    }
  }
  .form-container {
    margin: 15px;
    padding: 15px;
    .form-item {
    //   border-bottom: 1px solid #444;
      margin-bottom: 20px;
      .item-title {
        font-size: 16px;
        color:black;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .input-area {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 780px;
        .el-select__wrapper {
          margin-right: 20px;
        }
      }
      .text-area {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #555;
      }
      .tags {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .tagss {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .fee {
        display: flex;
      }
    }
  }

  .tab{
    margin:20px 0 0 43px;
  }
  .mosi{
    font-size: 16px;
    font-weight: bold;

  }
  .qqmosi{
    font-size: 16px;
  }
  .qiandiv{
    display: flex;
    align-items: center;
    margin: 15px 0 0 -16px;
    .radios{
        transform: scale(0.6);
    }
    span{
        margin: 3px 0 0 -9px;
    }
    .dansp2{
        margin-left: 50px;
    }
    .dansp3{
        margin-left: 18px;
    }
    .inp{
        width: 65px;
        height: 24px;
        margin: 5px 17px 0 9px;
    }
    .wangs{
      margin-right: 16px;
    }
    .sijiwang{
      margin-right: 16px;
    }
    .inpss{
        width: 65px;
        height: 24px;
        margin: 5px 4px 0 20px;
    }
    .inps{
        width: 65px;
        height: 24px;
        margin: 5px 20px 0 4px;
    }
    .dang{
      margin-left: 53px;
    }
    .dangs{
      margin-left: 22px;
    }
    .dansp5{
      margin-left: 60px;
    //    margin-left: 1px;
    }
    .dansp11{
        margin-left: 12px;
    }
    .dansp12{
        margin-left: 28px;
    }
    .dansp13{
        margin-left: 76px;
    }
    .dansp14{
        margin-left: 50px;
    }
    .dansp16{
        margin-left: 23px;
    }
    .dansp17{
      margin:0 16px 0 23px;
    }
    .dansp6{
        margin-left: 26px;
    }
    .dansp7{
        margin-left: 16px;
    }
    .dansp8{
        margin-left: 200px;
    }
    .dansp9{
        margin-left: 10px;
    }
    .dansp10{
        margin-left: 10px;
    }
    .dansp19{
      margin-left: 59px;
    }
    .dansp20{
      margin-left: 139px;
    }

  }
  .dansp1{
        font-weight: bold;
   }
   .addfenss{
      margin-left: 9px;
   }

   .addfentom{
    margin-left: 100px;
   }
   .btntom{
    margin:35px 0 0 20px ;
    .xiao{
      width:85px;
      height: 30px;
    }
    .store{
      width:85px;
      height: 30px;
      margin-left: 50px;
    }
   }
  
   
  </style>
  